<!doctype html>
<html class="no-js" lang="en">
<!--<![endif]-->
<head>
<meta name="layout" content="common">
<title>Redemption - Search Voucher</title>

<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.8.2/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="${resource(dir:'css', file:'demo_table.css') }">
<r:layoutResources/>
<!-- DataTables -->

<script type="text/javascript" charset="utf8" src="${resource(dir:'js', file:'jquery.dataTables.min.js') }"></script>
	<script>
	 function testAlert (){
		alert ('2');
	}
	function setRedemptionValues(id)
	{
		var rq = document.getElementById('redptQuantity'+id).value; 
		if (rq == 0) {
			alert("Redemption quantity can not be '0'"); 
			return false;
			} 

		document.voucherList.voucher_id.value = id;
		/*document.voucherList.action="redemption";
		document.voucherList.submit();*/
	}
	
	</script>
</head>
<body id="body">
	<h2>Redemption - Search Voucher</h2>
	<hr />

	<g:if test="${flash.message}">
		<div class="alert alert-success">
			<img src="${resource(dir:'images', file:'icon_successful.png') }" />&nbsp;&nbsp;${flash.message}
		</div>
	</g:if>
	 <g:if test="${flash.error}">
                <ul class="errors" role="alert">
                    ${flash.error}
                 </ul>
     </g:if>
	<h4>Current Reward Points - ${rewardPoint}</h4>
	<div class="row>">
		<g:form name="voucherList" method="POST" action="">
		<g:hiddenField id="voucher_id" name="voucher_id" value="" />
		
		<table width="100%">
			<tr>
				<td width="25%">Title</td>
				<td>
					<g:textField id="searchTitle" name="searchTitle" value="${searchTitle}"/>
				</td>
			</tr>
			<tr>
				<td>Country</td>
				<td>
					<g:select name="searchCountry" from="${com.mastercard.labs.Country.list()}" optionKey="id" optionValue="name" value="${searchCountry}" noSelection="${['':'Select One...']}"/>
				</td>
			</tr>
			<tr>
				<td>Merchant</td>
				<td>
					<g:select id="searchMerchant" name="searchMerchant" from="${com.mastercard.labs.Merchant.list()}" optionKey="id" optionValue="name" value="${searchMerchant}" noSelection="${['':'Select One...']}"/>
				</td>
			</tr>
			<tr>
				<td>Categories</td>
				<td>
					<g:select id="searchCategories" name="searchCategories" from="${com.mastercard.labs.Category.list()}" optionKey="id" optionValue="name" value="${searchCategories}" noSelection="${['':'Select One...']}"/>
				</td>
			</tr>
			<tr>
				<td></td>
				<td>
					<g:actionSubmit action="getVoucher" value="Search" class="btn"/>
				</td>
			</tr>
		</table>
		<br/><br/>
		<table class="display" width="95%" id="userList">
			<thead>
				<tr>
					<td width="5%"><b>SN</b></td>
					<td width="5%"><b>Image</b></td>
					<td><b>Title</b></td> 
					<td width="15%"><b>Category</b></td>
					<td width="10%"><b>End Date</b></td>
					<td width="8%"><b>Point</b></td>
					<td width="10%"><b>Total Quantity</b></td>
					<td width="9%"><b>Quantity</b></td>
					<td width="10%"><b>Redemption</b></td>
				</tr>
			</thead>
			<tbody>
				<g:each in="${voucherInstanceList}" var="usr" status="usrStat">
					<tr id="transaction-row-${usr.title}">
						<td>${usrStat + 1}</td>
						<td><g:img uri="${fieldValue(bean: usr, field: "imageUrl")}" height="30" width="30" /></td>
						<td>${fieldValue(bean: usr, field: "title")}</td>
						<td>${usr.categories?.name}</td>
						<td><g:formatDate date="${usr.endDate}"  format="dd/MM/yyyy" /></td>
						<td>${fieldValue(bean: usr, field: "rdptPoint")}</td>
						<td>${fieldValue(bean: usr, field: "totalQuantity")}</td>
						<td><g:select name="${'redptQuantity'+usr.id}" id="${'redptQuantity'+usr.id}" from="${0..20}" style="width:60px"/></td>
						<td>
						<g:actionSubmit action="redemption" value="Redemption" class="btn" onclick="return setRedemptionValues(${usr.id})" />
						</td>
					</tr>
				</g:each>
			</tbody>
		</table>
		</g:form>
	</div>
	<br/>
	
	<script src="${resource(dir:'js/app', file:'user_search.js') }"></script>
	<g:if test="${flash.message}">
		<script>
			new function(){
				window.open('<g:createLink controller="qrcode" action="text" params="[text: '${qrtext}']" absolute="true"/>', 'new_window')
			}
		</script>
	</g:if>
</body>
</html>